@font-face{font-family:"VCR OSD Mono";src:url("../font/vcr-osd-mono.woff2") format("woff2"),url("../font/VCR_OSD_MONO_1.001.ttf") format("truetype");font-weight:400 700;font-display:swap}
/* ============================================================================
   realmbet loading overlay — shared styles.
   Scoped entirely under .rb-loader so it can be dropped onto any page without
   clobbering the host's resets, :root vars, or layout.
   Pair with loader.js (which injects the markup and drives the animation).
   Fonts required on the host page: Silkscreen + Pixelify Sans.
   ========================================================================== */
.rb-loader{
  /* self-contained tokens (do not inherit the host page's --ink etc.) */
  --red:#EB454E; --red-light:#EC5B55; --red-dark:#5F292C; --orange:#EE7F49;
  --navy-deep:#151725; --bg:#0b0b12;
  --ink-bright:#ececec; --ink-dim:#8f93a6;
  --frame-light:#cfcfcf; --frame:#8a8a8a; --frame-dark:#3a3a3a;
  --pix:"VCR OSD Mono",ui-monospace,monospace;

  position:fixed;inset:0;z-index:99999;overflow:hidden;
  background:var(--bg);color:var(--ink-bright);
  font-family:"VCR OSD Mono",ui-monospace,monospace;
  background-image:
    radial-gradient(1200px 700px at 50% 42%, rgba(235,69,78,.06), transparent 70%),
    radial-gradient(900px 600px at 50% 120%, rgba(238,127,73,.04), transparent 70%),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.020) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.020) 0 1px, transparent 1px 4px);
  transition:opacity .5s steps(6), visibility 0s linear .5s;
}
.rb-loader.rb-done{opacity:0;visibility:hidden;pointer-events:none}
.rb-loader *{box-sizing:border-box;margin:0;padding:0}

/* vignette so the frame edges sink into black */
.rb-loader::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 220px 60px rgba(0,0,0,.85);
}

/* drifting pixel diamonds (parallax debris) */
.rb-loader .rb-field{position:absolute;inset:0;pointer-events:none;z-index:1}
.rb-loader .diamond{
  position:absolute;background:#171922;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  transform:rotate(45deg);
  animation:rb-drift linear infinite;
  will-change:transform,opacity;
}
@keyframes rb-drift{
  0%  {transform:translateY(0) rotate(45deg);   opacity:0}
  8%  {opacity:var(--o)}
  92% {opacity:var(--o)}
  100%{transform:translateY(-118vh) rotate(45deg); opacity:0}
}

/* corner brackets */
.rb-loader .corner{position:absolute;width:34px;height:34px;z-index:3;--c:var(--frame)}
.rb-loader .corner::before,.rb-loader .corner::after{content:"";position:absolute;background:var(--c)}
.rb-loader .corner::before{width:34px;height:5px}
.rb-loader .corner::after {width:5px;height:34px}
.rb-loader .corner.tl{top:22px;left:22px}
.rb-loader .corner.tr{top:22px;right:22px}
.rb-loader .corner.bl{bottom:22px;left:22px}
.rb-loader .corner.br{bottom:22px;right:22px}
.rb-loader .corner.tl::before{top:0;left:0} .rb-loader .corner.tl::after{top:0;left:0}
.rb-loader .corner.tr::before{top:0;right:0}.rb-loader .corner.tr::after{top:0;right:0}
.rb-loader .corner.bl::before{bottom:0;left:0}.rb-loader .corner.bl::after{bottom:0;left:0}
.rb-loader .corner.br::before{bottom:0;right:0}.rb-loader .corner.br::after{bottom:0;right:0}
.rb-loader .corner .pip{position:absolute;width:5px;height:5px;background:var(--c)}
.rb-loader .corner.tl .pip{top:12px;left:12px}
.rb-loader .corner.tr .pip{top:12px;right:12px}
.rb-loader .corner.bl .pip{bottom:12px;left:12px}
.rb-loader .corner.br .pip{bottom:12px;right:12px}

/* center stack */
.rb-loader .rb-center{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;
}

/* animating pixel R logo */
.rb-loader .rb-r{margin-bottom:8px;line-height:0;filter:drop-shadow(0 7px 0 rgba(0,0,0,.4))}
.rb-loader .rb-r canvas{display:block;image-rendering:pixelated;
  animation:rb-bob 2.8s steps(3) infinite}
@keyframes rb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* rotating tip line */
.rb-loader .tip{
  margin-top:20px;min-height:22px;
  font-family:var(--pix);font-size:12px;letter-spacing:1px;color:var(--ink-bright);
  text-shadow:0 2px 0 rgba(0,0,0,.6);
  transition:opacity .28s steps(4);
}
.rb-loader .tip .accent{color:var(--red)}

/* chunky pixel progress bar */
.rb-loader .progress-wrap{
  position:absolute;left:50%;bottom:12%;transform:translateX(-50%);
  z-index:4;width:min(360px,72vw);
}
.rb-loader .bar{
  position:relative;height:16px;background:#111420;
  box-shadow:
    0 0 0 2px var(--frame-dark),
    0 0 0 4px #14151d,
    inset 2px 2px 0 0 rgba(0,0,0,.7),
    inset -2px -2px 0 0 rgba(255,255,255,.04);
}
.rb-loader .fill{
  position:absolute;top:0;left:0;height:100%;width:0%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 3px, transparent 3px 6px),
    var(--red);
  box-shadow:inset 0 3px 0 0 var(--red-light), inset 0 -4px 0 0 var(--red-dark);
  transition:width .18s steps(6);
}
.rb-loader .pct-row{
  display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;
  font-family:var(--pix);font-size:9px;letter-spacing:1px;color:var(--ink-dim);
}
.rb-loader .pct-row .label{color:var(--ink-dim)}
.rb-loader .pct-row .pct{color:var(--orange)}
.rb-loader .caret{display:inline-block;width:6px;height:9px;background:var(--red);margin-left:6px;
  vertical-align:baseline;animation:rb-blink 1s steps(2) infinite}
@keyframes rb-blink{50%{opacity:0}}

@media(max-width:600px){
  .rb-loader .corner{width:26px;height:26px}
  .rb-loader .corner::before{width:26px}.rb-loader .corner::after{height:26px}
  .rb-loader .progress-wrap{bottom:10%}
}
@media(prefers-reduced-motion:reduce){
  .rb-loader .diamond,.rb-loader .caret,.rb-loader .rb-r canvas{animation:none}
}